<template>
    <div class="bus-card-list-option">
        <div class="lists">
            <a class="list" 
            v-for="item in Object.keys(optionData)"
            :key="optionData[item].id"
            :class="optionData.active ? 'active' : ''"
            @click="clickOption(optionData[item].id)"
            >
            {{optionData[item].name}}
            </a>
        </div>
        <div class="line" :style="{left: `${lineTopLeft * 33.33}%`}"></div>
    </div>
</template>

<script>
export default {
    name: 'busCardListOption',
    props: {
        option: {
            type: Object,
            default: {}
        },
        active: {
            type: String,
            default: 'man'
        }
    },
    methods: {
        clickOption(id) {
            this.$emit('clickOption', id)
        }
    },
    computed: {
        optionData() {
            return Object.assign({}, this.option)
        },
        lineTopLeft() {
            const keyArr = Object.keys(this.optionData)
            for(let i = 0; i < keyArr.length; i++){
                if (this.optionData[keyArr[i]].id === this.active) {
                    return i
                    break
                }
            }
        }
    },
}
</script>

<style lang="scss" scoped>
.bus-card-list-option {
    height: 45px;
    width: 100%;
    position: relative;
    border-bottom: 5px solid #e9e9e9;

    .lists {
        height: 100%;
        width: 100%;
        display: flex;

        .list {
            width: 33.3333%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #999999;
        }

        .active {
            color: #0077bf;
            font-weight: bold;
        }
    }

    .line {
        height: 2px;
        width: 33.33%;
        position: absolute;
        left: 0;
        bottom: -2px;
        background: #0077bf;
        transition: left .4s;
    }
}
</style>